<!DOCTYPE html>
<#assign DutyDept = JspTaglibs["http://www.casic304.cn/DutyDept"]/>
<html>
<head>
  <meta charset="utf-8">
  <title>化学压力电源信息列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    .qbdms-echarsDiv{
      position: absolute;top: 120px;left: 16px;right: 16px; bottom: 6px;overflow: auto;
      padding-top: 16px;
    }
    .layui-table-tool{
      min-height: unset!important;
    }
    @media screen and (min-width: 1380px){
      .chartDiv{
        width: 45%;
        float: left;
      }
    }
    @media screen and (min-width: 704px) and (max-width:1380px){
      .chartDiv {
        width: 96%;
        float: left;
      }
      .chartParDiv{
        top:170px
      }
    }
    .selch .layui-icon-date {
      top: 6px !important;
    }

  </style>
</head>
<body class="listBody">
<div class="qbdms-list">
  <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
    <div class="ccpui-enterSel">
      <form class="layui-form" action="" lay-filter="wQbdChemicalPhysicsInfoQueryForm">
        <div class="layui-form-body selch" style="margin-top: 0">
          <div class="table-top-filter layui-row">
            <div class="qbdms-listForm">
              <label class="layui-form-label">统计开始年份</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value start_time1"
                       name="beginTime" lay-verify="required"
                       placeholder="请输入" id="beginTime" lay-verify="required"/>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">统计结束年份</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value end_time1" name="endTime"
                       placeholder="请输入" id="endTime" lay-verify="required"/>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">型号代号</label>
              <div class="layui-input-block">
                <select class="layui-input filter-value" name="Q_fModelsymbol_S" lay-filter="xh" id="modelSymbol"/></select>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">统计方式</label>
              <div class="layui-input-block">
                <select name="statisticalMethods" autocomplete="off" class="layui-input" fieldname="statisticalMethods"
                        lay-filter="statisticalMethods" id="statisticalMethods" lay-verify="required">
                </select>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">导出图片格式</label>
              <div class="layui-input-block">
                <select name="imageFormat" autocomplete="off" class="layui-input" fieldname="imageFormat" lay-filter="imageFormat" id="imageFormat" lay-verify="required">
                  <option value="JPEG">JPEG</option>
                  <option value="PNG">PNG</option>
                </select>
              </div>
            </div>

<!--            <div class="qbdms-listForm">-->
<!--              <label class="layui-form-label">问题责任单位</label>-->
<!--              <div class="layui-input-block">-->
<!--                <select id="dutyDeptRoom" name="dutyDeptRoom" autocomplete="off"-->
<!--                        class="layui-input" lay-filter="dutyDeptRoom"-->
<!--                        fieldname="dutyDeptRoom">-->
<!--                </select>-->
<!--              </div>-->
<!--            </div>-->
        </div>
        <div class="selchBtn">
          <a class="layui-btn layui-btn-sm fillBtn" lay-event="query" qbdms-event="query">
            <span>查询</span>
          </a>

        </div>
    </div>
    </form>
  </div>
  <div class="qbdms-echarsDiv chartParDiv">
    <div id="chart1Bar" style="width:96%;height:600px;"></div>
    <div class="table-filter-alone">
      <div id="chart2Bar" class="chartDiv" style="height:600px;"></div>
      <!-- 研制型号原因 饼图-->
      <div id="chart2Pie" class="chartDiv" style="height:600px;margin-left: 24px"></div>
    </div>
    <div style="margin: 10px" id="table" style="display: none">
      <table id="wQbdChemicalPhysicsInfoTable" lay-filter="wQbdChemicalPhysicsInfoTable"></table>
    </div>
  </div>
</div>
</div>
<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>
  layui.config({
    base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'setter', 'common', 'publicMethods', 'jquery', 'layer', 'laydate','qbdmsForm','propsHandle'],
      function () {
        var table = layui.table;
        var common = layui.common;
        var publicMethods = layui.publicMethods;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.qbdmsForm;
        var imageFormat = "JPEG";
        var workPhaseType = "";  //研制阶段
        var gzjdlx = ""; // 工作阶段类型
        var statisticalMethods = "三年柱形图";
        var modelSymbol = "";
        var data1 = "";
        var data2 = "";
        var data3 = "";
        // var researchRoomList = eval('${researchRoomList}'); //问题责任单位（研究室）
        // var researchRoom = function(optionObj, item){
        //   optionObj.text = item.orgName;
        //   optionObj.value = item.code;
        // };
        // common.initDicData("dutyDeptRoom", researchRoomList, "", researchRoom);
        var propsHandle = layui.propsHandle;
        var defProps = {
                  //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                  viewMould: 'moulds/', // 组件模块 存放文件 *****
                  selectorBtn: '.selectorBtn'
                },
                temQuery = new propsHandle();  // 实例化模板功能部分
        temQuery.initTem({
          selectorBtn: defProps.selectorBtn,
          selectorTemPath: setter.views + defProps.viewMould
        });

        var events={
          query:function () {
            getChartData();
            return false;
          }
        };
        //点击事件
        $('body').on('click', '*[qbdms-event]', function(){
          var othis = $(this) ,
                  attrEvent = othis.attr('qbdms-event');
          events[attrEvent] && events[attrEvent].call(this, othis);
        });
        form.on('select(imageFormat)', function (data) {
          imageFormat = data.value;
          if (data1 != "") {
            firstEchart(data1);
          }
          if (data2 != "") {
            echartBar(data2);
          }
          if (data3 != "") {
            echartPie(data3);
          }
        });
        form.on('select(statisticalMethods)', function (data) {
          statisticalMethods = data.value;
        });
        form.on('select(xh)', function (data) {
          modelSymbol = data.value;
        });
        common.tableSort('wQbdChemicalPhysicsInfoTable');


        function dateReflash() {
          //年范围
          var tjfs = eval('${tjfs}');
          common.initDicData("statisticalMethods", tjfs);
          dateHanlder({startName: '.start_time1', endName: '.end_time1'});
          var xhdh = eval('${wQbdXhdhs}'); //型号代号
          var initXHDH = function (optionObj, item) {
            optionObj.text = item.fModelcode;
            optionObj.value = item.fModelcode;
          };
          $("#beginTime").val("${beginTime}");
          $("#endTime").val("${endTime}");
          common.initDicData("Q_fModelsymbol_S", xhdh, "", initXHDH);
          // $('#statisticalMethods').val("三年柱形图");
          //给表单赋值
          form.val("wQbdChemicalPhysicsInfoQueryForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "statisticalMethods": "三年柱形图" // "name": "value"
          });
          getChartData();
        }

        function dateHanlder(props) {
          if (props.startName && props.endName) {
            var nowTime = new Date().valueOf();
            var start = laydate.render({
              elem: props.startName,
              trigger: 'click',
              type: 'year',
              max: nowTime,
              done: function (value, date, endDate) {
                endMax = end.config.max;
                end.config.min = date; //最大时间为结束时间的开始值  
                end.config.min.month = date.month - 1;
                $(props.startName).val(value);
              }
            });
            var end = laydate.render({
              elem: props.endName,
              trigger: 'click',
              type: 'year',
              max: 4073558400000,
              format: 'yyyy-MM-dd',
              done: function (value, date) {
                if ($.trim(value) == '') {
                  var curDate = new Date();
                  date = {
                    'date': curDate.getDate(),
                    'month': curDate.getMonth() + 1,
                    'year': curDate.getFullYear()
                  };
                }
                start.config.max = date; //最小时间为开始时间的最大值  
                start.config.max.month = date.month - 1;
                $(props.endName).val(value);
              }
            });
          }
        }

        function getChartData() {
          var beginTime = $('#beginTime').val() + "-01-01";
          var endTime = $('#endTime').val() + "-12-31";
          gzjdlx = "";
          $.ajax({
            url:  '${ctx}/qbdms/modelQualityStatistics/getChartData',
            data: {
              "beginTime": beginTime,
              "endTime": endTime,
              "modelSymbol": modelSymbol,
              // "dutyDept": $("#dutyDeptRoom").val(),
              "statisticalMethods": statisticalMethods
            },
            type: 'post',
            dataType: 'json',
            async: false,
            success: function (res) {
              data1 = "";
              data2 = "";
              data3 = "";
              $("#chart1Bar").hide();
              $("#table").hide();
              $("#chart2Bar").hide();
              $("#chart2Pie").hide();
              if (statisticalMethods == "三年柱形图") {
                $("#chart1Bar").show();

                firstEchart(res.data[0]);
                renderTable(res);
                $("#table").show();
                workPhaseType = "";
                data1 = res.data[0];
                return;
              }
              if (statisticalMethods == "研制型号按原因统计") {
                data2 = res.data[0];
                data3 = res.data[1];
                echartBar(data2);
                echartPie(data3);
                workPhaseType = 1;
                $("#chart2Bar").show();
                $("#chart2Pie").show();
                return;
              }
              if (statisticalMethods == "批产型号按原因统计") {
                data2 = res.data[0];
                data3 = res.data[1];
                echartBar(data2);
                echartPie(data3);
                workPhaseType = 2;
                $("#chart2Bar").show();
                $("#chart2Pie").show();
                return;
              }

              if (statisticalMethods == "研制型号按阶段统计") {
                data2 = res.data[0];
                data3 = res.data[1];
                echartBar(data2);
                echartPie(data3);
                $("#chart2Bar").show();
                $("#chart2Pie").show();
                // 表示批产
                workPhaseType = 1;
                // 表示按阶段
                gzjdlx = 1;
                return;
              }
              if (statisticalMethods == "批产型号按阶段统计") {
                data2 = res.data[0];
                data3 = res.data[1];
                echartBar(data2);
                echartPie(data3);
                $("#chart2Bar").show();
                $("#chart2Pie").show();
                // 表示批产
                workPhaseType = 2;
                // 表示按阶段
                gzjdlx = 1;
                return;
              }


            },
          })

        }

        function renderTable(res) {
          table.render({
            defaultToolbar: [],
            elem: '#wQbdChemicalPhysicsInfoTable'
            , data: res.data[1].data
            , page: false //开启分页
            , toolbar: '#wQbdChemicalPhysicsInfoHeaderToolsBar'
            , method: 'post'
            , limit: 20
            , autoSort: false //是否排序
            , cols: [[{field: 'title', title: ''}
              , {field: 'year', title: '年份',minWidth:90}
              , {field: 'cz', title: '操作',minWidth:90}
              , {field: 'dd', title: '待定',minWidth:90},
              {field: 'gy', title: '工艺',minWidth:90},
              {field: 'gl', title: '管理',minWidth:90},
              {field: 'qt', title: '其他',minWidth:90},
              {field: 'rj', title: '软件',minWidth:90},
              {field: 'sb', title: '设备',minWidth:90},
              {field: 'sj', title: '设计',minWidth:90},
              {field: 'wg', title: '外购',minWidth:90},
              {field: 'wx', title: '外协',minWidth:90},
              {field: 'yqj', title: '元器件',minWidth:100}

            ]]
            , done: function () {
              common.tableSelectCon('.ccpui-enterSel .layui-form input', 'a[lay-event=query]',
                  '.ccpui-enterSel');
            }
          });
        }

        var myChart = echarts.init(document.getElementById("chart1Bar"));
        var chart2Bar = echarts.init(document.getElementById("chart2Bar"));
        var chart2Pie = echarts.init(document.getElementById("chart2Pie"));
        myChart.on('click', function (params) {
          getTableDetail(params);
        });
        chart2Bar.on('click', function (params) {
          getTableDetail(params);
        });
        chart2Pie.on('click', function (params) {
          getTableDetail(params);
        });

        function firstEchart(data) {
          // 基于准备好的dom，初始化echarts实例
          var option = {
            animation: false,
            color:['#5B8FF9','#f6bd16','#5ad8a6','#e86452','#5d7092','#ff9845','#6dc8ec','#ff99c3','#1e9493','#945fb9'],
            title: {
              text: data.title,
              x: '20',
              y: 'top'
            },
            grid:{
                top:110
            },
            tooltip: {
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                saveAsImage: {type: imageFormat}
              }
            },
            legend: {
              orient: 'horizontal',
              left: '20',
              top: '30',
              data: data.legend
            },
            xAxis: [
              {
                type: 'category',
                data: data.xAxis,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: "dashed"
                  }
                },
                name: '数量',
                // min: 0,
                // max: 250,
                // interval: 50,
                nameLocation: 'middle',
                nameTextStyle: {
                  color: '#00A8FF',
                  verticalAlign: 'bottom',
                  padding: [20, 20, 10, 20]
                },
                axisLine: {
                  lineStyle: {
                    width: 0
                  }
                },
                axisTick:{
                  show:false
                },
                axisLabel: {
                  formatter: '{value} '
                },
                axisLabel: {
                  textStyle: {
                    color: '#00A8FF'
                  }
                }
              },
              {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: "dashed"
                  }
                },
                name: '百分比',
                min: 0,
                max: 100,
                interval: 5,
                axisLabel: {
                  formatter: '{value} %'
                },
                axisTick:{
                  show:false
                },
                nameRotate: -90,
                nameLocation: 'middle',
                nameTextStyle: {
                  color: '#000000',
                  verticalAlign: 'bottom',
                  padding: [120, 20, 30, 20]
                },
                axisLine: {
                  lineStyle: {
                    width: 0
                  }
                }
              }
            ],
            series: data.data
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.clear();
          myChart.setOption(option);
        }

        function echartBar(data) {
          var option = {
            animation: false,
            title: {
              text: data.title,
              x: 'left',
              y: 'top'
            },
            color: ['#5B8FF9'],
            xAxis: [{
              type: 'category',
              data: data.xtitlelist,
            }],
            toolbox: {
              feature: {
                saveAsImage: {type: imageFormat}
              }
            },
            yAxis: [{
              type: 'value',
              name: '数量',
              nameLocation: 'middle',
              nameTextStyle: {
                verticalAlign: 'bottom',
                padding: [20, 20, 30, 440]
              },
              axisLine: {
                lineStyle: {
                  width: 0
                }
              }

            }],

            series: [{
              name: '直接访问',
              type: 'bar',
              data: data.datalist,
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    textStyle: { //数值样式
                      color: 'black',
                      fontSize: 16
                    }
                  }
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          chart2Bar.clear();
          chart2Bar.setOption(option);
        }

        function echartPie(data) {
          var optionPie = {
            color:['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E86452','#6DC8EC','#945FB9','#FF9845','#1E9493','#FF99C3'],
            animation: false,
            title: {
              text: data.title,
              left: 'left'
            },
            legend: {
              icon: 'circle',
              orient: 'horizontal',
              left: 'center',
              bottom: '50px',
              data: data.xtitlelist
            },
            toolbox: {
              feature: {
                saveAsImage: {type: imageFormat}
              }
            },
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              // center: ['50%', '60%'],
              data: data.datalist,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  label: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)'
                  },
                  labelLine: {
                    show: true
                  }
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          chart2Pie.clear();
          chart2Pie.setOption(optionPie);
        }

        function getTableDetail(params) {
          var height=publicMethods.layHeight('.listBody');
          var beginTime;
          var endTime;
          var title;
          if (workPhaseType == "") {
            var time = params.seriesName.substring(0, 4);
            title = time + "年" + params.name + "型号质量问题明细";
            beginTime = time + "-01-01";
            endTime = time + "-12-31";
          } else {
            beginTime = $('#beginTime').val();
            endTime = $('#endTime').val();
            title = beginTime + "-" + endTime + "年" + params.name + "型号质量问题明细";
          }
          layer.open({
            type: 2,
            title: title,
            skin:'qbdms-layerFormBtn',
            area: ['80%', height],
            content:  '${ctx}/qbdms/modelQualityStatistics/view/list?title=' + title + "&beginTime="
                + beginTime + "&endTime=" + endTime + "&modelSymbol=" + modelSymbol
                // "&dutyDept=" + $("#dutyDept").val()
                + "&fCausationclass1=" + params.name + "&workPhaseType="
                + workPhaseType+"&gzjdlx="+gzjdlx
          });

        }
        /*刷新时间控件*/
        dateReflash();
      });
</script>
</body>
</html>